<template>
  <a-row type="flex" class="container">
    <a-col :md="8" :sm="24" :xs="24">
      <a-card :bordered="false" class="card card-left">
        <div class="left-avatar">
          <a-avatar :src="tool.getAssetsFile('avatar.png')" :size="64" />
        </div>
        <a-descriptions :column="1" :labelStyle="{ 'font-weight': 'bold' }">
          <a-descriptions-item :label="t(`home.nickname`)"
            >黄冬瓜</a-descriptions-item
          >
          <a-descriptions-item :label="t(`home.job`)"
            >cv工程师</a-descriptions-item
          >
          <a-descriptions-item :label="t(`home.company`)"
            >小公司</a-descriptions-item
          >
          <a-descriptions-item v-if="false" :label="t(`home.age`)"
            >（先给我一百块）</a-descriptions-item
          >
          <a-descriptions-item :label="t(`home.sex`)">女</a-descriptions-item>
          <a-descriptions-item :label="t(`home.email`)"
            >1736556310@qq.com</a-descriptions-item
          >
          <a-descriptions-item :label="t(`home.tech`)"
            >js、ts、html、css、vue、react</a-descriptions-item
          >
        </a-descriptions>
        <a-divider style="margin: 10px 0" />
        <a-descriptions
          :labelStyle="{ 'font-weight': 'bold' }"
          layout="vertical"
        >
          <a-descriptions-item
            :label="t(`home.signature`)"
            :contentStyle="{ display: 'unset' }"
          >
            <a-tag color="processing">js</a-tag>
            <a-tag color="processing">css</a-tag>
            <a-tag color="processing">html</a-tag>
            <a-tag color="processing">vue</a-tag>
          </a-descriptions-item>
        </a-descriptions>
        <a-divider style="margin: 10px 0" />
        <a-descriptions
          :labelStyle="{ 'font-weight': 'bold' }"
          layout="vertical"
        >
          <a-descriptions-item :label="t(`home.likeword`)">
            爱意随风起，风止意难平
          </a-descriptions-item>
        </a-descriptions>
        <a-divider style="margin: 10px 0" />
        <a-descriptions
          :labelStyle="{ 'font-weight': 'bold' }"
          layout="vertical"
          :colon="false"
        >
          <a-descriptions-item label="说点什么，就是说，再说吧~">
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </a-col>
    <a-col :md="16" :sm="0" :xs="0">
      <a-row>
        <a-col :xl="8" :sm="12">
          <a-card class="card msg">
            <div class="msg-left" :style="{ background: '#2d8cf0' }">
              <user-outlined :style="{ 'font-size': '24px', color: '#fff' }" />
            </div>
            <div class="msg-right">
              <div class="count">
                <h2 :style="{ color: '#2d8cf0' }">4017</h2>
              </div>
              <div class="title">用户访问量</div>
            </div>
          </a-card>
        </a-col>
        <a-col :xl="8" :sm="12">
          <a-card class="card msg">
            <div class="msg-left" :style="{ background: '#64D572' }">
              <user-outlined :style="{ 'font-size': '24px', color: '#fff' }" />
            </div>
            <div class="msg-right">
              <div class="count">
                <h2 :style="{ color: '#64D572' }">1847</h2>
              </div>
              <div class="title">系统消息</div>
            </div>
          </a-card>
        </a-col>
        <a-col :xl="8" :sm="12">
          <a-card class="card msg">
            <div class="msg-left" :style="{ background: '#F25E43' }">
              <user-outlined :style="{ 'font-size': '24px', color: '#fff' }" />
            </div>
            <div class="msg-right">
              <div class="count">
                <h2 :style="{ color: '#F25E43' }">2045</h2>
              </div>
              <div class="title">数量</div>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <a-card title="系列开源产品" :bordered="false" class="card">
        <a-row>
          <a-col
            :span="12"
            @click="onOpen('https://ext.dcloud.net.cn/plugin?id=7511')"
          >
            <a-card class="card card-item">
              <h2 class="item-title">zb-table</h2>
              <div class="item-desc">
                uniapp 表格组件
                支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端
              </div>
            </a-card>
          </a-col>
          <a-col
            :span="12"
            @click="
              onOpen('https://github.com/zouzhibin/vue-admin-perfect/pulls')
            "
          >
            <a-card class="card card-item">
              <h2 class="item-title">vue-admin-perfect</h2>
              <div class="item-desc">
                系统基于vue3+vuex+ element-plus+ts后台管理系统
              </div>
            </a-card>
          </a-col>
        </a-row>
      </a-card>
      <a-card title="每周用户活跃量" :bordered="false" class="card">
        <div ref="main" style="width: 100%; height: 250px" class="canvas">
          123123
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { UserOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
import tool from "@/util/imgTool.js";
const { t } = useI18n();

const main = ref();
onMounted(() => {
  iniChart();
});
const onOpen = (url: string) => {
  window.open(url, "_blank");
};
const iniChart = () => {
  const myChart = echarts.init(main.value);
  const option = {
    tooltip: {},
    xAxis: {
      data: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
    },
    yAxis: {},
    series: [
      {
        type: "bar",
        data: [147, 100, 90, 250, 180, 190, 100],
      },
    ],
  };
  myChart.setOption(option);
  window.onresize = () => {
    myChart.resize();
  };
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.container {
  height: calc(100% - 42px);
  overflow-y: scroll;
  margin: 10px 0 10px 10px;

  .card {
    box-shadow: @borderShadow;
    border-radius: 4px;
    margin: 8px 5px;
  }

  .card-item {
    cursor: pointer;
    background: linear-gradient(50deg, #1890ff, #77e19d);
    height: calc(100% - 20px);

    .item-title {
      color: #fff;
      font-weight: bolder;
    }

    .item-desc {
      color: #fff;
    }
  }

  .card-left {
    margin-right: 6px;

    .left-avatar {
      margin-bottom: 16px;
    }
  }

  .msg {
    :deep(.ant-card-body):first-of-type {
      padding: 0;
      display: flex;
      height: 100px;

      .msg-left {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .msg-right {
        flex: 1;
        padding: 20px;
      }
    }
  }
}
</style>
